<template>
  <div class="func-comp-form">
    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse value="0">

          <Panel>
            地图
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="开启缩放漫游">
                  <i-switch v-model="chartOption.geo.roam">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItemPanel title="文本标签">
                  <Collapse accordion value="1">
                    <Panel name="1">
                      默认状态
                      <div slot="content">
                        <FormItem label="显示">
                          <i-switch v-model="chartOption.geo.label.normal.show">
                            <span slot="open"></span>
                            <span slot="close"></span>
                          </i-switch>
                        </FormItem>
                        <FormItem label="字体颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.label.normal.color" alpha recommend/>
                        </FormItem>
                      </div>
                    </Panel>
                    <Panel name="2">
                      鼠标滑入状态
                      <div slot="content">
                        <FormItem label="字体颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.label.emphasis.color" alpha recommend/>
                        </FormItem>
                      </div>
                    </Panel>
                  </Collapse>
                </FormItemPanel>
                <FormItemPanel title="地图区域的多边形-图形样式">
                  <Collapse accordion value="1">
                    <Panel name="1">
                      默认状态
                      <div slot="content">
                        <FormItem label="区域的颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.normal.areaColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="阴影颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.normal.shadowColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="阴影大小">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.geo.itemStyle.normal.shadowBlur"></InputNumber>
                        </FormItem>
                        <FormItem label="边框颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.normal.borderColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="边框大小">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.geo.itemStyle.normal.borderWidth"></InputNumber>
                        </FormItem>
                        <FormItem label="透明度">
                          <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="chartOption.geo.itemStyle.normal.opacity"></InputNumber>
                        </FormItem>
                      </div>
                    </Panel>
                    <Panel name="2">
                      鼠标滑入状态
                      <div slot="content">
                        <FormItem label="区域的颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.emphasis.areaColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="阴影颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.emphasis.shadowColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="阴影大小">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.geo.itemStyle.emphasis.shadowBlur"></InputNumber>
                        </FormItem>
                        <FormItem label="边框颜色">
                          <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.emphasis.borderColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="边框大小">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.geo.itemStyle.emphasis.borderWidth"></InputNumber>
                        </FormItem>
                        <FormItem label="透明度">
                          <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="chartOption.geo.itemStyle.emphasis.opacity"></InputNumber>
                        </FormItem>
                      </div>
                    </Panel>
                  </Collapse>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>

          <Panel>
            系列
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="名称">
                  <Input size="small" v-model="chartOption.series.name" placeholder=""/>
                </FormItem>
              </Form>
            </div>
          </Panel>

          <Panel>
            视觉映射组件
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.visualMap.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="左偏移">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.visualMap.left"></InputNumber>
                </FormItem>
                <FormItem label="下偏移">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.visualMap.bottom"></InputNumber>
                </FormItem>
                <FormItem label="最小值">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.visualMap.min"></InputNumber>
                </FormItem>
                <FormItem label="最大值">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.visualMap.max"></InputNumber>
                </FormItem>
                <FormItemPanel title="文本标签">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.visualMap.showLabel">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="chartOption.visualMap.textStyle.color" alpha recommend/>
                  </FormItem>
                </FormItemPanel>


                <FormItemPanel title="分段式视觉映射组件">
                  <Dropdown trigger="click" @on-click="addPiecesItem">
                    <Button type="primary" size="small">
                      新增区间分段
                      <Icon type="ios-arrow-down"></Icon>
                    </Button>
                    <DropdownMenu slot="list">
                      <DropdownItem name="gt"> > </DropdownItem>
                      <DropdownItem name="gt&lte"> > <= </DropdownItem>
                      <DropdownItem name="gte&lt"> >= < </DropdownItem>
                      <DropdownItem name="gte&lte"> >= <= </DropdownItem>
                      <DropdownItem name="le"> < </DropdownItem>
                      <DropdownItem name="value"> = </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                  <div class="clearfix"></div>
                  <div class="m-b-10px"></div>

                  <Collapse accordion>
                    <Panel :name="$PnUtil.uuid()" v-for="(row, index) in chartOption.visualMap.pieces" :key="index">
                      {{row.label}}
                      <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deletePiecesItem(index)">
                        <Icon type="md-trash" />
                      </a>
                      <div slot="content">
                        <Form :label-width="60">
                          <FormItem label="标签">
                            <Input size="small" v-model="row.label" placeholder=""/>
                          </FormItem>
                          <FormItem label="填充颜色">
                            <PnColorPicker size="small" v-model="row.color" alpha recommend/>
                          </FormItem>
                          <FormItem v-if="row.gt" label="大于">
                            <InputNumber size="small" :max="10000000" :min="-10000000" v-model="row.gt"></InputNumber>
                          </FormItem>
                          <FormItem v-if="row.gte" label="大于等于">
                            <InputNumber size="small" :max="10000000" :min="-10000000" v-model="row.gte"></InputNumber>
                          </FormItem>
                          <FormItem v-if="row.lt" label="小于">
                            <InputNumber size="small" :max="10000000" :min="-10000000" v-model="row.lt"></InputNumber>
                          </FormItem>
                          <FormItem v-if="row.lte" label="小于等于">
                            <InputNumber size="small" :max="10000000" :min="-10000000" v-model="row.lte"></InputNumber>
                          </FormItem>
                          <FormItem v-if="row.value" label="等于">
                            <InputNumber size="small" :max="10000000" :min="-10000000" v-model="row.value"></InputNumber>
                          </FormItem>
                        </Form>
                      </div>
                    </Panel>
                  </Collapse>

                </FormItemPanel>

              </Form>
            </div>
          </Panel>

        </Collapse>
      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="ChinaAreaHeatMapChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ChinaAreaHeatMapChartForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {
      addPiecesItem (name) {
        switch (name) {
          case 'gt':
            this.chartOption.visualMap.pieces.push({
              gt: 1000,
              label: '> 1000',
              color: ''
            });
            break;
          case 'gt&lte':
            this.chartOption.visualMap.pieces.push({
              gt: 10,
              lte: 100,
              label: '(10,100]',
              color: ''
            });
            break;
          case 'gte&lt':
            this.chartOption.visualMap.pieces.push({
              gt: 10,
              lte: 100,
              label: '[10,100)',
              color: ''
            });
            break;
          case 'gte&lte':
            this.chartOption.visualMap.pieces.push({
              gte: 10,
              lte: 100,
              label: '[10,100]',
              color: ''
            });
            break;
          case 'le':
            this.chartOption.visualMap.pieces.push({
              lt: 10,
              label: '< 10',
              color: ''
            });
            break;
          case 'value':
            this.chartOption.visualMap.pieces.push({
              value: 10,
              label: '= 10',
              color: ''
            });
            break;
          default:
        }
      },
      deletePiecesItem (index) {
        this.chartOption.visualMap.pieces.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
